<template>
    <div class="container">
        <br><br>
        <div class="room-table">
            <el-table :data="roomList" style="width: 100%">
                <el-table-column prop="rtype" label="房间类型" width="200" />
                <el-table-column prop="rnum" label="房间数量" width="100"/>
                <el-table-column prop="rcost" label="房间费用" width="100" />
                <el-table-column prop="rdescribe" label="房间描述" width="580" />
                <el-table-column label="图片" > 
                <template #default="scope">
                    <el-avatar :size="50" :src="scope.row.avatarUrl" />
                </template>
                </el-table-column>
                <el-table-column  label="操作">
                    <template #default="scope">
                        <el-button size="small" @click="handlerEdit(scope.row)">预订</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>   


          <!--用户编辑表格-->
        <el-dialog
          v-model="dialogVisible"
          :title="dialogTitle"
          width="500">
            <el-form
                ref="ruleFormRef"
                style="max-width: 600px"
                :model="user"
                label-width="auto"
                class="demo-ruleForm"
                :size="formSize"
                status-icon>
                <el-form-item label="姓名" prop="cname">
                    <el-input v-model="customer.cname" />
                </el-form-item>
                <el-form-item label="性别" prop="csex">
                    <el-radio-group v-model="customer.csex">
                        <el-radio value="0">男</el-radio>
                        <el-radio value="1">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="customer.cphone" />
                </el-form-item>
                <el-form-item label="身份证" prop="cidentity">
                    <el-input v-model="customer.cidentity" />
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="customer.remark" />
                </el-form-item>
                <el-form-item label="入住时间" prop="checkin">
                    <el-input v-model="customer.checkin" />
                </el-form-item>
                <el-form-item label="离开时间" prop="departure">
                    <el-input v-model="customer.departure" />
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="customer.remark" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveCustomer">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
    import { onMounted,ref } from "vue";
    import { ElMessage,ElMessageBox } from 'element-plus'
    const dialogTitle = ref('编辑用户')
    //用户编辑页面是否显示
    const dialogVisible = ref(false)
  
    //操作类型  add：添加； update:修改
    const optionType = ref('')
  
    const room = ref(
        {
            rtype: "",
            rnum: "",
            rcost: "",
            rdescribe: ""
        },
    )

    const customer = ref(
        {
            cname:"",
            csex:"",
            cphone:"",
            cidentity:"",
            rtype:"",
            remark:"",
            checkin:"",
            departure:""
        }
    )
    const roomList = ref([
        {rtype:'双人房',rnum:15,rcost:'350',rdescribe:'这是一个双人房'}
    ]);

    //保存用户数据
    const saveCustomer = () =>{
        let url = "http://localhost:8080/student/findAll" ;
        let methodName = 'add' ;
        fetch(url,{
            method:methodName,
            headers:{
                'Content-Type':'application/json'
            },
            body: JSON.stringify(customer.value)
        })
        .then( res => res.json())
        .then( res => {
            ElMessage({
                message: '用户信息修改成功',
                type: 'success',
            })
            dialogVisible.value = false ;
        })
    }

    //查询所有房间
    const selectAllRooms = () =>{
        fetch("http://localhost:8080/student/findAll",{
            method: 'GET',
            mode: 'cors'
        })
        .then( res => res.json())
        .then( res => roomList.value = res.data)
    }
  
  
    //查询数据的函数
    onMounted(() => {
        //selectAllRooms();
    })

    const handlerEdit = row =>{
        optionType.value = 'edit'
        dialogTitle.value = '预订房间'
        dialogVisible.value = true
    }
</script>

<style scoped>
    .container{
        text-align: center;
    }
    table{
        border-collapse: collapse;
        border: 1px solid rgb(8, 8, 8);
        display: inline-block;
    }
  
    .room-table{
        width: 80%;
        margin: 0 auto;
    }
</style>
  